Usage 用法

導航抽屜是一個選單面板，讓使用者可以輕鬆訪問應用的不同功能和頁面，比如切換不同的賬戶。這個面板可以一直顯示在螢幕上，也可以透過點選選單按鈕來開啟或關閉。任何時候都會有一個頁面處於選中狀態。

導航抽屜最適合用在以下情況：

• 應用中有5個或更多主要頁面需要訪問

• 應用的頁面結構有2層或更多層級

• 需要在不同功能之間快速切換

• 在大螢幕裝置上，可以替代導航欄或導航軌道來顯示選單

根據你的螢幕大小，可以選擇最合適的導航方式：

• 小螢幕裝置用導航欄

• 中等大小的螢幕用導航軌道

• 大螢幕裝置用標準導航抽屜

Standard navigation drawer標準導航抽屜

標準導航抽屜主要用於大螢幕裝置。它的作用是讓使用者更容易在應用的各個部分之間切換。

它有兩種基本使用方式：

1. 常駐顯示模式：適用於使用者需要頻繁在不同頁面間切換的情況

2. 點選顯示模式：透過選單按鈕控制顯示和隱藏，適合使用者想要更大內容顯示空間的情況

注意：如果你的應用執行在中小螢幕裝置上，最好使用模態導航抽屜。

Modal navigation drawer 模態導航抽屜

模態導航抽屜會在開啟時在背景顯示一個遮罩層，這樣可以防止使用者誤觸其他介面內容。這種設計不會改變螢幕上其他元素的排列方式。

這種抽屜可以用在任何大小的螢幕上，不過最常用在較小的螢幕或那些需要優先顯示主要內容的中等大小螢幕上。在較大的螢幕上，你可以根據需要選擇使用模態導航抽屜或標準導航抽屜。

模態導航抽屜總是透過抽屜外部的操作開啟，例如點選導航欄中的導航選單圖示。

模態抽屜可以透過以下方式關閉：

• 選擇抽屜中的專案

• 點選遮罩層

• 向抽屜的錨定邊緣滑動（例如，對於左對齊的導航抽屜，從右向左滑動）

模態抽屜可以透過點選遮罩層（1）或向錨定螢幕邊緣滑動抽屜（2）來關閉。

Anatomy 結構

導航抽屜本質上是一個包含在側邊欄中的列表。它們還可以包括標題、副標題和分隔符，以組織更長的列表。

Sheet 表單

表單是放置導航抽屜所有內容的容器。它可以用來顯示標準和模態兩種型別的導航抽屜。

導航抽屜會從螢幕邊緣滑出。在使用從左到右書寫的語言（比如中文、英文）時，它從左邊滑出；在使用從右到左書寫的語言（比如阿拉伯文）時，它從右邊滑出。

Divider (optional) 分隔線（可選）

分隔線可用於在導航抽屜中分隔不同的目的地組。

Active indicator 活動指示器

活動指示器就是一個顯示背景色的區域，它告訴你當前正在檢視導航抽屜中的哪個選項。

The active indicatoris a background shape communicating which destination of the navigation drawer is currently being displayed

Label text and icons 標籤文字和圖示

導航抽屜的每個選項都是一個可點選的列表項。每個選項都包含文字說明，也可以搭配圖示來表示不同的頁面。文字說明很重要，因為它幫助使用者理解每個選項的功能，同時也讓殘障使用者更容易使用。無論導航抽屜是展開還是收起狀態，都要顯示這些文字說明。

也可以選擇不帶圖示的文字標籤，標籤文字應清晰且簡短，以確保不會被表單截斷。

link

Copy link  複製連結

checkDo  做
Keep text labels concise, but truncate them if they extend beyond the container width

圖示用來更好地識別每個選項，它們是對文字的補充說明。記住要把圖示放在文字的前面。這個圖示樣式也應該在整個應用中保持一致。

Section label (optional) 節標籤（可選）

使用簡短的標題可以幫助把相關的功能分組在導航抽屜中，讓使用者更容易找到需要的內容。

Scrim (modal only) 遮罩層（僅限模態）

遮罩層是模態導航抽屜的一個半透明背景層。它的作用很簡單：當你開啟抽屜時，遮罩層會擋住其他介面內容，防止你誤點選到其他地方。你可以直接點選遮罩層來關閉抽屜。

Responsive layout 響應式佈局

導航元件會根據螢幕大小和裝置型別自動調整顯示方式。

你可以在任何螢幕尺寸下使用模態導航抽屜（可開啟關閉的選單），不過它在小螢幕和中等螢幕上最好用。標準導航抽屜（總是顯示在螢幕一側的選單）更適合大螢幕使用。

當螢幕布局改變時（比如手機從豎屏轉為橫屏），選單的顯示方式也會平滑過渡。舉個例子，底部導航欄可能會變成側邊導航抽屜。

Compact window size 緊湊視窗尺寸

在緊湊的視窗尺寸中使用模態導航抽屜。或者將抽屜替換為導航欄。

在網頁上，當螢幕尺寸小於 320px（CSS 畫素）時，將導航抽屜替換為導航欄以確保可訪問性。

Medium & expanded window sizes 中等和擴充套件視窗尺寸

在中等和擴充套件螢幕尺寸下，你可以選擇兩種方式來使用導航：要麼只用模態導航抽屜，要麼把它和導航欄搭配使用。

如果你同時使用導航欄和模態導航抽屜，兩者可以顯示相同的導航選項。不過要注意：抽屜要清晰地展示不同層級之間的區別。如果是擴充套件尺寸的螢幕，你還可以使用標準導航抽屜來佈局單個視窗的內容。

Large and extra-large window sizes大尺寸和超大尺寸視窗

對於膝上型電腦和桌上型電腦裝置上的網頁體驗，請使用標準導航抽屜或可轉換為模態導航抽屜的導航欄。

Behavior 行為

導航抽屜的內容可以上下滾動，這不會影響到頁面的其他部分。當導航列表比抽屜高度長時，你可以在抽屜內部滾動檢視所有選項。

Visibility 可見性

可收起的標準導航抽屜適用於兩種情況：一是當你想讓內容佔據更多空間時（比如顯示照片），二是在使用者不需要經常切換頁面的應用中。使用者可以透過點選選單圖示來開啟或關閉這個導航抽屜。

永久可見的標準抽屜允許在不相關的目的地之間快速導航。使用者無法關閉或隱藏它們。

Appearing 出現

導航抽屜開啟和關閉時會顯示平滑的動畫效果。

Interaction & style  互動與樣式

Touch  觸控

• 當點選導航項時，活動指示器會出現在原位，向使用者反饋其已被選中

• 觸控漣漪透過指示器傳遞

• 圖示從線框變為填充

• 圖示顏色發生變化，變得更暗了

Cursor  游標

• 當滑鼠懸停時，懸停指示器出現，提供視覺提示，表明目的地是互動式的

• 當點選時，波紋穿過指示器

• 圖示從線框變為填充

• 圖示會改變顏色，淺色主題下變深，深色主題下變淺，以提高對比度

Visual indicators  視覺指示符

圖示是導航的主要關注點，因此能明確提示其狀態。為所選目標使用實心圖示，以區別於未選目標的輪廓圖示。